import React from 'react'
import {connect,} from "react-redux";
import {PullToRefresh} from "antd-mobile"
import FootballGameCard from "../../../../shared-components/FootballGameCard/FootballGameCard";
import NoDataPage from "../NoDataPage/NoDataPage";
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../../../redux/game";
import EventFilterList from "../EventFilterList/EventFilterList";
import GameListHandler from "../../../../model/GameList";
import {formatDate, handleDateChange} from "../../../../utils/dateService";

class LiveGame extends React.Component {

    // constructor(props) {
    //
    //     super(props)
    //     this.today = formatDate(new Date())
    //     this.state = {
    //         // refresh: false,
    //         // listCompleted: false,
    //         height: document.documentElement.clientHeight - 48 - 43.5 - 50,
    //         gameListHandler: null,
    //     }
    // }
    //
    // componentDidMount() {
    //     this.setHandler()
    // }
    //
    // componentDidUpdate(prevProps, prevState, snapshot) {
    //     const today = this.today
    //     const games = this.props.games
    //     const {matches,} = games[today]
    //     const prevMatches = prevProps.games[today].matches
    //     if (matches.length > 1 && matches.length !== prevMatches.length) {
    //         this.setHandler()
    //     }
    // }
    //
    // setHandler = () => {
    //     const today = this.today
    //     const games = this.props.games
    //     // const today = this.props.today
    //     const {
    //         teams,
    //         events,
    //         stages,
    //         matches,
    //     } = games[today]
    //     this.setState({
    //         gameListHandler: new GameListHandler({matches, teams, events, stages,})
    //     })
    // }
    //
    // // onRefresh = async () => {
    // //     await this.props.doFetchGameListAll({
    // //         date: this.props.today,
    // //     })
    // // }

    render() {

        const games = this.props.game.games
        const today = this.props.today
        const yesterday = formatDate(handleDateChange(today, -1))
        const inc = this.props.includeYesterdayMatch


        if (!games[today]) return null

        let {
            teams,
            events,
            stages,
            matches,
        } = games[today]

        const yesGames = games[yesterday]
        if (inc && yesGames) {
            teams = {...yesGames.teams, ...teams}
            events = {...yesGames.events, ...events}
            stages = {...yesGames.stages, ...stages}
            matches = [...yesGames.matches, ...matches]
        }
        const handler = new GameListHandler({teams, matches, stages, events,})
        const matchesToRender = handler.getMatches('live')
        // const matchesToRender = matches
        //     .filter(match => match[2] >= 2 && match[2] < 8)
        const matchesRender = (matches) => {
            let handler = new GameListHandler({matches, teams, events, stages})
            let list = handler.listAll()
            const hot = this.props.hot
            if (hot) {
                const hots = this.props.hots
                list = list.filter(game => {
                    const event = game.event
                    const names = [event.name_zh, event.short_name_zh,]
                    let isHot = false
                    names.map(name => {
                        hots.map(hot => {
                            if (name === hot) {
                                isHot = true
                            }
                        })
                    })
                    return isHot
                })
            }
            let template = list.map(game => <FootballGameCard game={game} key={game.matchId}/>)
            return list.length > 0 ? template : <NoDataPage/>
        }

        const liveGamesTemplate = <EventFilterList
            // height={this.state.height}
            matches={matchesToRender}
            render={matchesRender}
        />

        // return matchesToRender.length > 0 ? liveGamesTemplate : <NoDataPage />
        return <div className='game-list-ctn'>
            {liveGamesTemplate}
        </div>

        return <PullToRefresh
            damping={60}
            distanceToRefresh={50}
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
            style={{
                height: this.state.height,
                overflow: 'auto',
                backgroundColor: 'rgb(248, 248, 248)',
            }}
            ref={el => this.ptr = el}
        >
            {liveGamesTemplate}
            {/*{matchesToRender.length > 0 ? liveGamesTemplate : <NoDataPage />}*/}
        </PullToRefresh>
    }

}


const mapState = (state) => ({
    game: state.game,
    today: state.game.today,
})

const mapDispatch = (dispatch) => ({
    doFetchGameList: (payload) => dispatch.game.doFetchGameList(payload),
    doFetchGameListAll: (payload) => dispatch.game.doFetchGameListAll(payload),
    doFetchGameListLive: (payload) => dispatch.game.doFetchGameListLive(payload),
    doRefreshGameListAll: (payload) => dispatch.game.doRefreshGameListAll(payload),
})


export default connect(mapState, mapDispatch)(LiveGame)
